<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 14:59:22
 * @LastEditors: dh
 * @LastEditTime: 2025-09-16 09:12:47
-->
<style>
	/* ---------- 不太常用 ----------   */

	/* 选中div下一个兄弟元素节点p、 */
	/* 陪陪div后面有p元素的p，只会选中 p */
	div+p {
		background: red;
	}

	/* 选中div下面所有为p的兄弟元素节点p，并列结构下、 */
	div~p {
		background: red;
	}

	/* 选中属性值包含a(两边有单词边界)的元素、  */
	div[data~='a'] {
		background: red;
	}

	/* 选中 a 开头，或者 a- 开头的元素、 */
	div[data|='a'] {
		background: red;
	}

	/* 选中以a开头的元素、 */
	div[data^='a'] {
		background: red;
	}

	/* 选中以a结尾的元素、 */
	div[data$='a'] {
		background: red;
	}

	/* 选中只要包含a的任意元素、  */
	div[data*='a'] {
		background: red;
	}

	/* 兼容性差、改变input提示颜色、 */
	input::placeholder {
		color: red;
	}

	/* 改变字体文本选中后的样式、 */
	div::selection {
		/* 只能设置三个样式  */
		color: red;
		background-color: red;
		text-shadow: red;
	}

	/* ---------->伪类选择器、(被选中元素的一种状态)  */
	/* E:not(s) 选中除了最后一个 :last-of-type 的所有li元素、  */
	ul li:not(:last-of-type) {
		border-bottom: 1px solid red;
	}

	/* 选中 跟标签、相当于html 绝对最父级、  */
	:root {
		background-color: red;
	}

	/* 被锚点触发的状态样式、<a href="#div">点击后</a> */
	div:target {
		color: red;
	}

	/* li -->选中同级下·第一个 */
	/* 匹配父元素下元素的集合，并且第一个元素为E才选中。*/
	ul>li:first-child {}

	/* li -->选中同级下·最后一个  */
	ul>li:last-child {}

	/* 选中ul里面只有单独一个的li (独生子) */
	ul>li:only-child {
		color: red;
	}

	/* TODO 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。 */
	/* 选中指定的li、(css索引从1开始)   */
	ul>li:nth-child(3) {
		color: red;
	}

	/* 选中奇数的li、(css索引从1开始、但n是自然数，它是从0开始的) 或者 */
	:nth-child(add) ul>li:nth-child(2n + 1) {
		color: red;
	}

	/* 选中偶数的li、 或者  */
	:nth-child(even) ul>li:nth-child(2n) {
		color: red;
	}

	/* 倒过来，选中最后一个、 */
	ul>li:nth-last-child(1) {
		color: red;
	}

	/* 匹配最前三个子元素 n>=0 */
	div p:nth-child(-n + 3) {}

	/* 匹配最后三个子元素 n>=0*/
	div p:nth-last-child(-n + 3) {}

	/* ---------- 以上都考虑其他元素，对它的影响、比如说选中第一个 li:nth-child(1) 但同级元素下第一个实际为span标签、那么不会选 ---------->比较常用 该类型 li 的第一个、 */

	/* 匹配父元素下类型为E集合中的第一个E*/
	ul>li:first-of-type {
		color: red;
	}

	/* 该类型 li 的最后一个、  */
	ul>li:last-of-type {
		color: red;
	}

	/* 该类型 li 在同级下只有一个时选中、(独生子、特有)  */
	ul>li:only-of-type {
		color: red;
	}

	/* TODO 匹配同类型中的第n个同级兄弟元素E。  */
	/* 该类型 li 的指定个、、、 */
	ul>li:nth-of-type(3) {
		color: red;
	}

	ul>li:nth-of-type(add) {
		color: red;
	}

	ul>li:nth-of-type(even) {
		color: red;
	}

	/* 选中从2开始，到最后一个的、 */
	ul>li:nth-of-type(n + 2) {
		color: red;
	}

	/* 选中div标签为空节点的、<div></div><div>< !-- 注释在css中不算节点，但空格算 --></div> */
	div:empty {
		background-color: red;
	}

	/* 当前input是复选框、这个实例是点击input触发checked状态的css， 当前input:checked+span在被触发时就可以选中下一个为span的标签了，并且利用它改变css样式、  */
	input:checked+span {
		background-color: red;
	}

	input:checked+span::after {
		content: ' Hello Wrold~ ';
		color: #ccc;
	}

	/* disabled是选中被禁止状态的标签， <input type="text"disabled> */
	input:disabled {
		background-color: red;
	}

	/* 选中被禁止修改状态的标签、 <input type="text"readonly value="这个是禁止修改的状态。可以选择，但不能删改(只读)"> */
	input:read-only {
		color: red;
	}

	/* first-line  选择器用来指定选择器第一行的样式。 自测只有 p标签 有效果*/
	p:first-line {
		background-color: yellow;
	}

	/* first-letter 伪类选择器，选中第一个字符。自测只有 p标签 有效果 */
	p:first-letter {
		background-color: yellow;
	}

	/* :is() 选择器 */
	/* FIXME 选择所有.dark 元素中的所有后代中 是.name的 元素 */
	.name:is(.dark *) {}

	/* 等同 .dark .name {} */


	/*  选择所有.dark 元素中的 span元素 中 是.name的 元素 */
	.name:is(.dark span) {}

	/* 等同 .dark span.name {} */


	.name :is(.dark span) {}

	/* 等同 .name .dark,.name span {} */
</style>